<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery/jquery1.9/jquery-1.9.0.js"></script>
    <script>
        $(function(){
            $("input:eq(0)").click(function(){
                // 选择所有 input, textarea, select 和 button 元素
                console.log($("form :input").length);
                $("form :input").css("background","red");
            });
            $("input:eq(1)").click(function(){
                
                console.log($("form :text").length);
                $("form :text").css("background","red");
            });
            $("input:eq(2)").click(function(){
                
                // console.log($("form :radio").length);
                var radios=$("form :radio");//jQuery对象（集合）
                // for(var i=0;i<radios.length;i++){
                //     console.log(radios[i].value);//DOM对象.value
                // }

                //jQuery提供的工具函数each()进行遍历循环操作
                // $.each(对象,回调函数);
                $.each(radios,function(index,item){
                    // console.log(index);//索引
                    // console.log(item);//对应的DOM对象
                    // console.log(this===item);
                    console.log(item.value);
                }); 

                var arrs=["alice","baby","cici"];
                $.each(arrs,function(index,value){
                    // console.log(index);//索引
                    console.log(value);//元素值
                });
            });
            $("input:eq(3)").click(function(){
                //选择所有按钮元素(button标签)和类型为按钮(type="button")的元素
                console.log($("form :button").length);
                $("form :button").css("background","red");
            });
            $("input:eq(4)").click(function(){
              
                console.log($("form :input:enabled").length);
                $("form :input:enabled").css("background","red");
                $.each($("form :input:enabled"),function(index,item){
                    console.log(item);
                });
            });
            $("input:eq(5)").click(function(){
              
                // :checked 选择器适用于复选框 （checkbox） ，单选框（radio button），和select元素的option元素。 
                console.log($("form :checked").length);
                $.each($("form :checked"),function(index,item){
                    console.log(item);
                });

            });
            $("input:eq(6)").click(function(){
              
              // 匹配所有选中的option元素
              console.log($("form :selected").length);
              $.each($("form :selected"),function(index,item){
                  console.log(item);
              });

          });
           

           
        });
    </script>
</head>
<body>
    <input type="button" value="选择表单中所有的input">
    <input type="button" value="选择表单中所有的单行文本框">
    <input type="button" value="选择表单中所有的单选按钮">
    <input type="button" value="选择表单中所有的button按钮">
    <input type="button" value="选择表单中所有的可用的input">
    <input type="button" value="选择下拉列表中的单选按钮和复选框，下拉列表">
    <input type="button" value="选择被选中的下拉列表选项">
    <form action="">
        用户名：<input type="text" disabled><br>
        密码：<input type="password"> <br>
        姓名：<input type="radio" name="sex" value="male">男
             <input type="radio" name="sex" value="female">女<br>
        爱好：<input type="checkbox" name="hobby" value="eat">吃饭
             <input type="checkbox" name="hobby" value="sleep">睡觉
             <input type="checkbox" name="hobby" value="doudou">打豆豆<br>
        头像：<input type="file"><br>
        学历：
            <select name="" multiple>
                <option value="1">高中</option>
                <option value="2">大专</option>
                <option value="3">本科</option>
                <option value="4">研究生</option>
            </select>
            <br>
        简介：
            <textarea name=""  cols="30" rows="10">

            </textarea>
            <br>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
            <button>我是button标签</button>
            <input type="button" value="我是按钮">

    </form>
</body>
</html>